import React, { Component } from 'react';

import Flex from 'antd-mobile/lib/flex';
import Button from 'antd-mobile/lib/button';
import Toast from 'antd-mobile/lib/toast';
import Modal from 'antd-mobile/lib/modal';

import 'antd-mobile/lib/flex/style/index.css';
import 'antd-mobile/lib/button/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import 'antd-mobile/lib/modal/style/index.css'

import { Link } from 'react-router-dom';

import '../static/styles/index.css'
import '../static/styles/toast.css'

import Counter from '../components/Counter';
import wxUtils from '../utils/wxUtils';

import { get } from  '../api/getData';

import MyGroup from '../components/MyGroup';

import {getQueryString} from '../utils/util';

import shareImg from '../static/imgs/share.PNG';

class Index extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: '',
            desc: '',
            img: '',
            price: 0,
            oldPrice: 0,
            start: 0,
            end: 0,
            surplus : 0,
            teams : [],
            show : 'huodong',
            is_my : 1,
            visible: false,
            is_new : 0,
            complate_num : 0,
            nums:0,
            datemax_format_zw : '',
            show_my : 0,
            pro_id : 0
        };
    }

    componentDidMount(){
        let __this = this;
        let teamId = getQueryString('team_id');
        let showMy = getQueryString('show_my');
        __this.setState({
            is_new : getQueryString('is_new') >= '1' ? getQueryString('is_new') : 0 ,
            show_my : showMy
        });

        get('/product' , {team_id : teamId , show_my: showMy} , function (error , data) {
            if(error === null) {
                if (data.code === 1) {
                    let pro_info = data.data.pro_info;
                    let member = data.data.member;

                    let myteam = data.data.is_my ? data.data.myTeam : [data.data.team];

                    // wxUtils.optionMenu(true);
                    wxUtils.share({
                        link:'http://hd.gx.189.cn/login?team_id=' + teamId,
                        description:pro_info.description,
                        title : "我正在参加一元团购小米充电宝，还差1人就能成团，快来帮我组团~",
                        imgUrl:member.avatar
                    });

                    let nowDate = Date.parse(new Date()) / 1000;
                    let end = Date.parse(new Date(pro_info.datemax_format)) / 1000;

                    let surplus = end - nowDate;

                    if(__this.state.is_new){
                        var newTeam = new Array();
                        for (var i = 0 ; i < myteam.length ; i++){
                            if(myteam[i].id == __this.state.is_new){
                                newTeam.push(myteam[i]);
                            }
                        }

                        myteam = newTeam;
                    }

                    __this.setState({
                        name: pro_info.name,
                        desc: pro_info.description,
                        price:pro_info.price.split('.'),
                        pro_id : pro_info.id,
                        oldPrice : pro_info.price_old,
                        img : 'http://hd.gx.189.cn/uploads/'+pro_info.thumb_img,
                        nums : pro_info.nums,
                        start:pro_info.datemin,
                        end:pro_info.datemax,
                        surplus: surplus + '',
                        teams : myteam,
                        teamId : teamId,
                        is_my : data.data.is_my,
                        complate_num : data.data.complate_num,
                        datemax_format_zw : pro_info.datemax_format_zw
                    });

                    document.title = pro_info.name;

                }else{
                    Toast.fail(data.msg, 2 , function () {
                        window.location.reload();
                    });
                }
            }
        });

    }

    openGroup(){
        let __this = this;
        if(!__this.state.is_my && 3 - __this.state.teams[0].member.length <= 0){
            __this.state.is_my = 1;
        }
        get('/joinTeam' , {team_id : __this.state.teamId , new : __this.state.is_my} , function (error , data) {
            if(error === null){
                if(data.code === 1){
                    Toast.success(data.msg, 2 , function () {
                        window.location.href ='http://'+window.location.hostname + window.location.pathname+'?team_id=' + data.data.team_id + '&is_new=' + data.data.team_id;
                    });
                }else if(data.code === 2){
                    Toast.info(data.msg, 2 , function () {
                        window.location.href ='http://'+window.location.hostname + window.location.pathname+'?team_id=' + data.team_id + '&show_my=1';
                    });
                }else if(data.code === 3){
                    Toast.success(data.msg, 2 , function () {
                        window.location.href ='http://'+window.location.hostname + window.location.pathname+'?team_id=' + data.data.team_id + '&is_new=' + data.data.team_id+'&show_my=1';
                    });
                } else if(data.code === 10){
                    window.location.href = data.data;
                }
            }else{
                Toast.fail(error, 2 , function () {
                    // window.location.reload();
                });
            }
        })
    };

    showModal = (e) => {
        // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
        // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            visible: true,
        });
    };
    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    myAllGroup(){
        window.location.href = '/index?team_id='+this.state.teamId + '&show_my='+this.state.show_my;
    }

    render() {
        return (
            <div className="content">
                <div className="goods-imgs">
                    <img src={this.state.img} alt=""/>
                    <img style={{width:'50px',position:'absolute',right:'10px',top:'5px'}} src={shareImg} />
                </div>
                {/*<div className="price-time">*/}
                    {/*<div className="price">*/}
                        {/*<div className="now"><span className="tuangoujia">团购价</span><span className="rmb">￥</span><span>{this.state.price[0]}<span className="point">.{this.state.price[1]}</span></span></div><div className="old">原价{this.state.oldPrice}</div>*/}
                    {/*</div>*/}
                    {/*<div className="time">*/}
                        {/*<div>距结束还剩</div>*/}
                        {/*<div>*/}
                            {/*{ this.state.surplus ? <Counter value={this.state.surplus} step='1'/> : '' }*/}
                        {/*</div>*/}
                    {/*</div>*/}
                {/*</div>*/}
                {/*<div className="goods-info">*/}
                    {/*<h1>{this.state.name}</h1>*/}
                {/*</div>*/}
                {
                    this.state.is_my ?
                        this.state.is_new ?
                            <div>
                                {
                                    this.state.teams.length === 1?
                                        this.state.teams.map(function (team) {
                                            return  <div>
                                                <div className="new-notice">
                                                    已为您创建新团！只差<span>{3 - team.nums}位</span>就成团。找好友参团，点击右上角，你懂的！
                                                </div>
                                                <MyGroup num={3} members={team.member}/>
                                            </div>
                                        })
                                    :
                                    this.state.teams.map(function (team) {
                                        if(team.status === 0 ) {
                                            return  <div>
                                                <div className="new-notice">
                                                    已为您创建新团！只差<span>{3 - team.nums}位</span>就成团。找好友参团，点击右上角，你懂的！
                                                </div>
                                                <MyGroup num={3} members={team.member}/>
                                            </div>
                                        }
                                    })
                                }
                                <div className="my-group-btn">
                                    <Button className="btn" onClick={this.myAllGroup.bind(this)} size="small">我所有的团</Button>
                                </div>
                            </div>
                            :
                            <div>
                                <div className="active-notice">
                                    <p>本活动12月22日23:59:59截止组团</p>
                                    <p>你有<span>{this.state.complate_num}团</span>满员，有<span>{this.state.complate_num}次</span>抽奖机会</p>

                                    <p>本活动豪爽备货</p>
                                    <p><span>{this.state.nums}</span>台小米移动电源</p>
                                    <p>团越多机会越大哦！</p>
                                </div>
                                <div className="my-group-btn">
                                    <Button className="btn" onClick={this.openGroup.bind(this)} size="small">我要新建团</Button>
                                </div>
                                <div className="my-group-title">我的团</div>
                                {
                                    this.state.teams.map(function (team , index) {
                                        {console.log(index)}
                                        return <MyGroup num={3} groupNum={index} members={team.member}/>
                                    })
                                }
                            </div>
                        :
                        <div>
                            {
                                3 - this.state.teams[0].member.length <= 0 ?
                                    <div>
                                        <div className="create-group-notice">该团已满，赶快创建属于自己的团吧！</div>
                                        {
                                            this.state.teams.map(function (team) {
                                                return <MyGroup num={3} members={team.member}/>
                                            })
                                        }
                                        <div className="my-group-btn">
                                            <Button className="btn" onClick={this.openGroup.bind(this)} size="small">创建新团</Button>
                                            <div>本活动无需预付款，请放心参加</div>
                                        </div>
                                    </div>
                                    :
                                    <div>
                                        <div className="create-group-notice">3人成团，<span>现在只差{3 - this.state.teams[0].member.length}位好友</span>，快点加入！</div>
                                        {
                                            this.state.teams.map(function (team) {
                                                return <MyGroup num={3} members={team.member}/>
                                            })
                                        }
                                        <div className="my-group-btn">
                                            <Button className="btn" onClick={this.openGroup.bind(this)} size="small">马上加入该团</Button>
                                            <div>本活动无需预付款，请放心参加</div>
                                        </div>
                                    </div>
                            }
                        </div>
                }


                <Flex className="footer" justify="between" align="center">
                    <div style={{flex:'1'}}><Link to={`/zhongjiang/${this.state.pro_id}`}>中奖名单</Link></div>
                    {/*<div style={{flex:'1'}}><Link to="/zhongjiang">晒流量赢红包</Link></div>*/}
                    <div style={{flex:'1'}} onClick={this.showModal}>活动细则</div>
                </Flex>

                <Modal
                    title="活动细则"
                    transparent
                    closable={true}
                    maskClosable={true}
                    visible={this.state.visible}
                    onClose={this.onClose}
                    style={{width:'8.4rem',textAlign:'left'}}
                >
                    <p>1.活动时间：2017年12月12日-12月22日</p>
                    <p>2.关注广西电信微信公众号即可参加。</p>
                    <p>3.参加者每人最多可创建9个新团，每人只能加入一次他人创建的团，即每个人最多共参与10个团。团内凑满三人即为满员团。创建新团和加入他人团的行为无法撤销。</p>
                    <p>4.组团成绩统计截止时间为12月22日23:59:59,截止后将从所有满员团中随机抽出66个中奖团，中奖团内每一位粉丝都可获得小米充电宝优惠购买资格一次。</p>
                    <p>5.凭券可在广西电信网厅内，以人民币1元购买小米充电宝10000毫安一台。</p>
                    <p>6.广西电信微信公众号将在2017年12月25日公布中奖名单，并微信或短信联系每位获奖粉丝，微信或短信发送优惠购买兑换码。</p>
                    <p>7.为保证活动公平公正，如使用不正当技术手段将取消其获奖用户资格。</p>
                    <p>8.客服热线：4008771189。</p>
                </Modal>
            </div>
        );
    }
}

export default Index;
